@import "common";

@blue-dark : #556AAE;
@blue : #496ad9;
@blue-light : lighten(@blue,3%);

html{width: auto;margin: 0;}
body{display: none;}

@border : #e5e8ec;

.content{
    width: 1200px;margin: 0 auto;padding: 0 10px;box-sizing: border-box;
}

h2{padding-top: 46px;font-size: 32px;text-align: center;}
h3{padding-top: 8px;font-size: 16px;text-align: center;font-weight: normal;color: #999;}

nav{
    position: absolute;top: 0;width: 100%;height: 80px;box-sizing: border-box;color: #fff;z-index: 100;border-top: 4px solid transparent;transition: .5s;
    .content{height: 100%;}
    .logo{float: left;line-height: 76px;font-size: 24px;cursor: pointer;
        i{font-size: 40px;vertical-align: -8px;}
    }
    .list{float: right;padding: 25px 0;
        li{float: left;width: 100px;height: 26px;
            &.blue{margin-left: 15px;
                a {background-color: @blue;color: #fff;
                    &:hover{background-color: @blue-light;
                        &:before{background: none!important;}
                    }
                }
            }
            a{color: inherit;display: block;height: 100%;line-height: 26px;border-radius: 30px;text-align: center;font-size: 16px;position: relative;
                &:before{content: '';position: absolute;bottom: -6px;left: 50%;width: 30px;height: 4px;border-radius: 30px;margin-left: -15px;}
                &:hover:before{background-color: @blue;}
            }
        }
    }
    &.scroll{
        background-color: #fff;border-top-color: @blue-dark;color: #333;position: fixed;box-shadow: 0 0 5px 2px rgba(0,0,0,0.1);
        .logo{
            color: @blue-dark;
        }
        .list li.blue a{background-color: @blue-dark;}
        .list li a:hover:before{background-color: @blue-dark;}
    }
}

.header{
    height: 570px;width: 100%;
    .swiper-slide{background: center / cover no-repeat;}
    .swiper-slide{
        background-image: url("/src/img/index/banner-1.jpg");
        &.slide-2{
            background-image: url("/src/img/index/banner-2.jpg");
        }
        &.slide-3{
            background-image: url("/src/img/index/banner-3.jpg");
        }
    }
    //分页
    .swiper-pagination{
        .swiper-pagination-bullet{background-color: #fff;}
    }
    .header-page{
        position: absolute;z-index: 1000;bottom: 45px;left: 0;right: 0;text-align: center;
    }
    .dl{
        padding-top: 180px;color: #fff;
        dt{font-size: 50px;}
        dd{margin-top: 30px;font-size: 18px;
            a{margin-top: 10px;border: 0;background-color: @blue;border-radius: 30px;height: 45px;line-height: 45px;padding: 0 45px;font-size: inherit;color: inherit;display: inline-block;
                &:hover{background-color: @blue-light;}
            }
        }
    }
}

.introduct{
    background-color: #f0f3f6;
    .content{
        margin-top: 32px;position: relative;height: 408px;
        .li{
            width: 350px;height: 280px;box-sizing: border-box;border: .5px solid @border;padding: 15px;background-color: #fff;float: left;margin-left: 65px;position: relative;z-index: 2;overflow: hidden;
            &:first-child{margin-left: 0;}
            .icon{position: absolute;top: -40px;right: -30px;font-style: normal;color: #f0f3f6;font-size: 150px;}
            .tit{color: #999;font-size: 18px;}
            .img{width: 100px;height: 100px;margin: 20px auto 0;}
            .name{margin-top: 5px;text-align: center;font-size: 24px;}
            .dd{margin-top: 20px;text-align: center;font-size: 14px;color: #999;}
        }
        .bg-icon{position: absolute;z-index: 1;top: 195px;left: 200px;}
    }
}

.service{
    height: 1388px;position: relative;
    .img{
        width: 1010px;height: 1153px;margin: 50px auto 0;background: url("/src/img/index/img-1.png") top left / contain no-repeat;
    }
    .icon{
        background: top left / contain no-repeat;position: absolute;opacity: 0.7;
        &.icon-1{
            top: 0;left: 0;width: 413px;height: 258px;background-image: url("/src/img/index/bg-icon-2.png");
        }
        &.icon-2{
            bottom: 77px;left: 0;width: 213px;height: 404px;background-image: url("/src/img/index/bg-icon-3.png");
        }
        &.icon-3{
            top: 262px;right: 0;width: 273px;height: 499px;background-image: url("/src/img/index/bg-icon-4.png");
        }
    }
}

.module-1{
    height: 200px;width: 100%;background: url("/src/img/index/bg-img-1.jpg") center / cover no-repeat;color: #fff;
    .tit{padding-top: 55px;text-align: center;font-size: 24px;}
    .btn{color: inherit;background: none;border: 1px solid #fff;border-radius: 30px;font-size: 18px;width: 160px;height: 45px;line-height: 48px;text-align: center;display: block;margin: 33px auto 0;transition: .5s;
        &:hover{border-color: @blue;background-color: @blue;}
    }
}

.scenes{
    height: 870px;
    .title{
        margin-top: 50px;border-bottom: 1px solid @border;text-align: center;
        span{cursor: pointer;height: 44px;line-height: 44px;display: inline-block;padding: 0 27px;font-size: 16px;border-bottom:3px solid transparent;
            &.cur{border-bottom-color: @blue-dark;}
        }
    }
    .contbox{
        height: 680px;position: relative;
        .contbox-li{
            display: none;padding: 40px 0 0;text-align: center;position: absolute;top: 0;left: 0;right: 0;bottom: 0;
            &:nth-child(2){display: block;}
        }
        .active{
            .swiper-slide{padding-bottom: 40px;}
        }
    }
}

.yxq-code{
    position: relative;z-index: 101;display: none;
    .cover-bg{position: fixed;top:0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.5);}
    .cont{
        position: fixed;width: 300px;height: 360px;top: 50%;left: 50%;margin-top: -180px;margin-left: -150px;background-color: #fff;border-radius: 4px;
        .yxq-code-close{position: absolute;font-size: 18px;color: #999;line-height: 50px;width: 50px;text-align: center;top: 0;right: 0;cursor: pointer;}
        .qrcode{text-align: center;margin-top: 20px;}
        p{margin-top: 50px;text-align: center;font-size: 16px;}
    }
}

footer{
    background-color: #36353b;color: #fff;
    .content{overflow: hidden;padding: 50px 0;}
    dl{
        line-height: 30px;
        dt{font-size: 16px;margin-bottom: 15px;font-weight: bold;}
        dd{font-size: 14px;color: #999;}
    }
    .about{
        float: left;padding: 0 44px;min-width: 80px;
    }
    .address{
        float: left;padding: 0 70px;border-left: 1px solid #444;border-right: 1px solid #444;
    }
    .icon-qrcode{
        float: left;margin-left: 85px;width: 348px;height: 152px;
    }
    .bottom{
        line-height: 50px;height: 50px;color: #999;text-align: center;background-color: #29282d;font-size: 14px;clear: both;
    }
}

.circleProcess {
    position: relative;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    stroke-dasharray: 255%;
    stroke-dashoffset: 255%;
    stroke: #fff;
    fill: none;
    transform: rotate(-90deg);
    margin: 0 4px;
    cursor: pointer;
    &.over{
        stroke-dashoffset: 0%;
        animation: svgg 5s linear;
    }
}
@keyframes svgg{
    0%{
        stroke-dashoffset: 255%;
    }
    100%{
        stroke-dashoffset: 0;
    }
}

